<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 -淘！我喜欢</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="favicon.ico">
    <base target="_blank">
</head>
<body>
    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix leayer">
        <!-- 子元素设置浮动 父元素需要清除浮动 -->
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li class="mr7">
                <a href="#" class="login mr7">亲，请登录</a>
                <a href="#">免费注册</a>
            </li>
            <li>
                <a href="#">手机逛淘宝</a>
            </li>
        </ul>
        <ul class="fr">
            <li>
                <a href="">我的淘宝</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <span class="iconfont mr5 c4">&#xf0179;</span>
                <a href="#">购物车</a>
                <strong>0</strong>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#"><span class="iconfont mr5">&#xe643;</span>收藏夹</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">商品分类</a>
            </li>
            <li class="Line">|</li>
            <li>
                <a href="#">千牛卖家中心</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <a href="#">联系客服</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
            <li>
                <span class="iconfont c4 mr5">&#xe608;</span>
                <a href="#">网站导航</a>
                <span class="iconfont arrow">&#xe60b;</span>
            </li>
        </ul>
    </div>

    <!-- 头部广告 -->
    <div id="headAd">
        <div class="leayer clearfix">
            <!-- 左边 -->
            <a href="#" class="fl go"><img src="images/go.png" alt=""></a>
            <!-- 右边 -->
            <ul class="fr">
                <!-- <li>
                    <a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a>
                    <h3><a href="#">电视会场</a></h3>
                    <p><a href="#">最高降2000</a></p>
                </li> -->
                <!-- emmet语法 -->
                <li class="item1">
                    <a href="#" class="fr">
                        <img src="images/adimg_01.jpg" alt="">
                    </a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item2">
                    <a href="#" class="fr">
                        <img src="images/adimg_02.jpg" alt="">
                    </a>
                    <h3><a href="">电饭煲会场</a></h3>
                    <p><a href="">最高降1500</a></p>
                </li>
                <li class="item3">
                    <a href="#" class="fr">
                        <img src="images/adimg_03.jpg" alt="">
                    </a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item4">
                    <a href="#" class="fr">
                        <img src="images/adimg_04.jpg" alt="">
                    </a>
                    <h3><a href="">冰箱会场</a></h3>
                    <p><a href="">最高降3000</a></p>
                </li>
                <li class="item5">
                    <a href="#" class="fr">
                        <img src="images/adimg_05.jpg" alt="">
                    </a>
                    <h3><a href="">运动会场</a></h3>
                    <p><a href="">最高降500</a></p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix leayer">
            <!-- <h1><a href="#"><img src="images/logor.png" alt="淘宝网"></a></h1> -->
            <h1 class="fl"><a href="#">淘宝网</a></h1>

            <div class="code fr">
                <span class="iconfont close">&#xe607;</span>
                <span class="c5">手机淘宝</span>
                <img src="images/code.png" alt="">
            </div>
            <div class="search">
                <ul class="searchTab clearfix">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>

                <div class="searchContent clearfix">
                    <form action="">
                        <div class="searchBox fl">
                            <!-- 搜索的文本框 -->
                            <input type="text">
                            <!-- 放大镜和文字 -->
                            <div class="placeholder">
                                <i class="iconfont ">&#xe612;</i>
                                <span>网红裤腰带 洋气 国际范 9.9包邮</span>
                            </div>
                            <span class="iconfont imgSearch">&#xe7bc;</span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="hotkey">
                    <a href="#" class="c5">积木</a>
                    <a href="#">网线</a>
                    <a href="#" class="c5">爬行垫</a>
                    <a href="#">时尚连衣裙</a>
                    <a href="#">男士寸衣</a>
                    <a href="#" class="c5">时尚休闲裤</a>
                    <a href="#">粽子</a>
                    <a href="#">沙发</a>
                    <a href="#">风扇</a>
                    <a href="#">定制窗帘</a>
                    <a href="#">男士内裤</a>
                    <a href="#">凉席三件套</a>
                    <a href="#">办公桌</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航 -->
    <div id="nav" class="leayer clearfix">
        <h2 class="fl">主题市场</h2>
        <ul class="fl">
            <li class="size"><a href="3">天猫</a></li>
            <li class="size"><a href="3">聚划算</a></li>
            <li class="size"><a href="3">天猫超市</a></li>
            <li class="line">|</li>
            <li><a href="#">淘抢购</a></li>
            <li><a href="#">电器城</a></li>
            <li><a href="#">司法拍卖</a></li>
            <li><a href="#">淘宝心选</a></li>
            <li><a href="#">兴农扶贫</a></li>
            <li class="line">|</li>
            <li><a href="#">飞猪旅行</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">苏宁易购</a></li>
        </ul>
    </div>

    <!-- 首屏内容 -->
    <div id="firstScreen" class="leayer clearfix">
        <!-- 左边的内容 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">
                <ul>
                    <li><a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保障</a><span class="iconfont fr">&#xe62e;</span></li>
                    <li><a href="#">学习</a> / <a href="#">卡劵</a> / <a href="#">本地服务</a><span class="iconfont fr">&#xe62e;</span></li>
                </ul>  
            </div>
            <!-- 图片1容器 -->
            <div class="img1Box fr">
                <div class="pic fl">,    
                    <div class="img" >
                        <a href=""><img id="lunbo" src="images/lunbo01.jpg" alt=""></a>
                    </div>

                    <button class="iconfont leftBtn">&#xe645;</button>
                    <button class="iconfont rightBtn">&#xe62e;</button>

                    <div class="circle">
                        <span  class="active"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <div class="ad fr">
                    <a href="#"><img src="images/ad_02.jpg" alt=""></a>
                </div>
            </div>
            <!-- 图片2容器 -->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">  
                        <div class="text clearfix">
                            <span class="flwz">理想生活上的天猫</span>
                            <span class="fr"><i>1</i>/6</span>
                        </div>
                        <div>
                            <span class="line"></span>
                        </div>
                    </div>
                    <div class="img"><a href=""><img class="flimg" src="images/pic_02.jpg" alt=""></a><a href=""><img class="frimg" src="images/pic_03.jpg" alt=""></a></div>
                </div>

                <div class="ad fr">
					<p class="title">今日热卖</p>
					<a href="#"><img src="images/ad_03.jpg" alt=""></a>
				</div>
            </div>
            <!-- 淘宝头条 -->
            <div class="news fl">
                <div class="ttimg fl">
                    <img src="./images/news_logo.png" alt=""><br /><span>让你的生活更有趣</span>
                </div>
                <div class="fl news_img">
                    <img src="./images/news_img_01.jpg" alt="">
                </div>
                    <div class="news_wz">
                        <p><a class="news_wzp" href="">微漫酱访谈第三期：超萌舞见弥音音！</a><a href=""><span class="fr news_wzspan">更多 &gt;</span></p></a>
                        <a class="news_wza" href="">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a>
                    </div>
            </div>
        </div>
        <!-- 右边的内容 -->
        <div class="firstRight fr">
          <div class="user">
              <a class="avatar" href=""><img src="./images/avatar.jpg" alt=""></a>
              <p class="username">Hi,你好</p>
              <p class="members">
                  <a href="" class="glod">领淘金币抵钱</a>
                  <a href="" class="club">会员俱乐部</a>
              </p>
             <div class="btn">
                <button class="login">登录</button>
                <button class="register">注册</button>
                <button class="shop">开店</button>
             </div>
          </div>
           <!-- 举报 -->
        <a class="tipOff" href=""><span>网上有害信息举报专区</span><span class="iconfont jbtb">&#xe62e;</span></a>
          <!-- 公告区 -->
          <div class="notice">
              <ul class="title">
                      <li class="active" ><a href="" class="active"></a>公告</li>
                      <li><a href="" class="active"></a>规则</li>
                      <li><a href="" class="active"></a>论坛</li>
                      <li><a href="" class="active"></a>安全</li>
                      <li><a href="" class="active"></a>公益</li>
              </ul>
              <ul class="content clearfix">
                  <li class="item1"><a href="#">天猫618进入热身  84个品牌在天猫共获粉丝4.3亿</a></li>
                  <li><a href="#">天猫618五折卖车</a></li>
                  <li><a href="#">天猫618直播间观看指南</a></li>
              </ul>
          </div>
          <!-- 图标区域 -->
          <table class="icon">
            <tr>
                <td class="item1">
                    <a href="#">
                        <span></span>
                        <i>充话费</i>
                    </a>
                </td>
                <td class="item2">
                    <a href="#">
                        <span></span>
                        <i>旅行</i>
                    </a>
                </td>
                <td class="item3">
                    <a href="#">
                        <span></span>
                        <i>车险</i>
                    </a>
                </td>
                <td class="item4">
                    <a href="#">
                        <span></span>
                        <i>游戏</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="item5">
                    <a href="#">
                        <span></span>
                        <i>彩票</i>
                    </a>
                </td>
                <td class="item6">
                    <a href="#">
                        <span></span>
                        <i>电影</i>
                    </a>
                </td>
                <td class="item7">
                    <a href="#">
                        <span></span>
                        <i>酒店</i>
                    </a>
                </td>
                <td class="item8">
                    <a href="#">
                        <span></span>
                        <i>理财</i>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="item9">
                    <a href="#">
                        <span></span>
                        <i>找服务</i>
                    </a>
                </td>
                <td class="item10">
                    <a href="#">
                        <span></span>
                        <i>演出</i>
                    </a>
                </td>
                <td class="item11">
                    <a href="#">
                        <span></span>
                        <i>水电煤</i>
                    </a>
                </td>
                <td class="item12">
                    <a href="#">
                        <span></span>
                        <i>火车票</i>
                    </a>
                </td>
            </tr>
          </table>
          <!-- 阿里App -->
          <div class="app">
            <div class="title clearfix">
                <h3 class="fl">阿里App</h3>
                <a href="#" class="fr">更多<span class="iconfont">&#xe62e;</span></a>
            </div>
            <ul class="appSpan">
                <li><a href="#"><img src="images/app_01.webp" alt=""></a></li>
                <li><a href="#"><img src="images/app_02.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_03.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_04.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_05.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_06.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_07.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/app_08.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_09.png" alt=""></a></li>
                <li><a href="#"><img src="images/app_10.png" alt=""></a></li>
            </ul>
          </div>
    </div>
       <!-- 有好货与爱逛街 -->
    <div class="clearfix mt10 leayer">
        <!-- 有好货 -->
        <div class="goods fl ">
            <div class="head clearfix">
                <h3 class="fl">
                    <img src="./images/goods.png" alt="有好货">
                    <span class="iconfont">&#xe614;</span>
					<i>与品质生活不期而遇</i>
                </h3>
                <a href="#" class="fr change">换一换</a>
            </div>
            
        <ul class="list">
            <li>
                <a href="#"><img src="./images/shop_img_01.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
            <li>
                <a href="#"><img src="./images/shop_img_02.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
            <li>
                <a href="#"><img src="./images/shop_img_03.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
            <li>
                <a href="#"><img src="./images/shop_img_04.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
            <li>
                <a href="#"><img src="./images/shop_img_05.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
            <li>
                <a href="#"><img src="./images/shop_img_06.jpg" alt=""></a>
                <h4><a href="">max破产都要买的口红</a></h4>
                <p><a href="">《破产姐妹》max最爱Tarte哑光口红笔</a></p>
                <a href=""><span class="iconfont">&#xe63d;</span><i>5950 人说好</i></a>
            </li>
        </ul>
        </div>
        <!-- 爱逛街 -->
        <div class=" fr shopping goods">
            <div class="head clearfix">
                <h3 class="fl">
                    <img src="./images/shopping.png" alt="有好货">
                    <span class="iconfont">&#xe614;</span>
					<i>献给聪明的你</i>
                </h3>
                <a href="#" class="fr change">换一换</a>
            </div>
            <ul class="list">
                <ul class="list">
                    <li>
                        <a href="#"><img src="./images/shop_img_07.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/shop_img_08.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/shop_img_09.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/shop_img_10.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/shop_img_11.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/shop_img_12.jpg" alt=""></a>
                        <p><a href="">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p>
                        <a href=""><span class="iconfont">&#x35ba;</span><i>爱逛***01</i></a>
                    </li>
            </ul>
        </div>
    </div>
    <!-- 右侧固定定位导航 -->
    <div id="tool">
        <span class="iconfont">&#x35ba;</span>
        <div class="btn">
            <a href="#" class="active">爱逛 好货</a>
            <a href="#">品质 特色</a>
            <a href="#">实惠 热卖</a>
            <a href="#">猜你 喜欢</a>
            <a href="# " class="item6">反馈</a>
            <a href="#">暴恐 举报</a>
        </div>
    </div>
    <script>

  
    </script>
</html>